<template>
  <div class="DContainer">
    <div class="topImg">
        <img 
            src="@/assets/images/home/DFD.png"
            class="pointer"
            @click="showImg"
            alt=""
         />
        <div class="teamTask">
            <p style="margin-left: 50px;"><strong>团队任务:</strong></p>
            <div class="list">
                <ol type="1">
                    <li>系统设计：系统的总体功能和架构设计；</li>
                    <li>算法实现：核心算法与模型实现——智慧物联网边缘计算系统；</li>
                    <li>数据获取：要求模拟生成物联网设备任务数据；</li>
                    <li>数据库设计：数据库模式设计；</li>
                    <li>编程实现：利用Python，TensorFlow和数据库实现系统；</li>
                    <li>UI设计：友好方便的用户界面，包含物联网传感数据获取、动态异常检测、异常事件可视化、预警信息发布、数据查询和后台管理等；</li>
                    <li>系统后台管理：基于系统管理功能实现；</li>
                    <li>功能测试：设计测试用例；</li>
                    <li>开发文档：需求调研、概要设计、详细设计、测试用例等；</li>
                </ol>
            </div>
        </div>
    </div>
    <div class="bottomPersonalDivision">
        <el-card 
            shadow="hover"
            v-for="item in MainRoleList"
            :key="item.id"
        >
           <div class="imgContainer">
                <img :src="item.imgSrc" />
           </div>
           <el-divider style="width: 100%; margin: 10px 0;"></el-divider>
           <strong>{{ item.name }}</strong>
           <div class="personalTasks">
              <ol v-for="(itemV, index) in item.taskList" :key="index">
                <li>{{ index + 1 }}: {{ itemV }}</li>
              </ol>
           </div>
        </el-card>
    </div>

    <!-- 查看头像/人脸 -->
    <BasicDialog
      :visible="imgDialogVisible"
      width="60%"
      :showClose="true"
      @handleClose="close"
    >
      <img 
        style="width: 100%; height: 100%;" 
        src="@/assets/images/home/DFD.png" 
        alt="暂无图片..."
      >
    </BasicDialog>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

let imgDialogVisible = ref<boolean>(false)
const showImg = () => {
  imgDialogVisible.value = true
}
const close = () => {
  imgDialogVisible.value = false
}

interface MainRole {
  id: number
  imgSrc: string
  name: string
  taskList: Array<string>
  link: string
}

// 头像三剑客
const MainRoleList: MainRole[] = [
  {
    id: 1,
    imgSrc: '/src/assets/images/avatar/cb.jpg',
    name: '陈波',
    taskList: [
        '毕设课题的经济效益与社会贡献分析；毕设课题与法律、法规、健康、安全、环境等因素的关联分析；',
        '技术选型对比分析或算法差异对比分析；',
        '前端UI设计和实现：Web端、移动App或微信小程序，实现智慧物联网训练数据获取、动态任务卸载、不同系统参数变化对性能影响的可视化、数据查询和后台管理等；',
        '简单易用的UX实现；',
        '实现与算法及系统管理等模块之间应用和数据接口；',
        '对智慧物联网边缘计算的相关英文文献进行翻译。'
    ],
    link: 'https://gitee.com/cbxiaochen'
  },
  {
    id: 2,
    imgSrc: '/src/assets/images/avatar/lhb.jpg',
    name: '李泓勃',
    taskList: [
        '毕设课题的经济效益与社会贡献分析；毕设课题与法律、法规、健康、安全、环境等因素的关联分析；',
        '技术选型对比分析或算法差异对比分析；',
        '实现基于TD3的任务卸载算法；',
        '实现两种对比算法；',
        '实现与算法及系统管理等模块之间应用和数据接口；',
        '对智慧物联网边缘计算的相关英文文献进行翻译。'
    ],
    link: 'https://gitee.com/Suponler'
  },
  {
    id: 3,
    imgSrc: '/src/assets/images/avatar/zfc2.jpg',
    name: '张逢春',
    taskList: [
        '毕设课题的经济效益与社会贡献分析；毕设课题与法律、法规、健康、安全、环境等因素的关联分析；',
        '技术选型对比分析或算法差异对比分析；',
        '实现基于联邦训练的SAC任务卸载算法；',
        '实现两种对比算法；',
        '实现与算法及系统管理等模块之间应用和数据接口；',
        '对智慧物联网边缘计算的相关英文文献进行翻译。'
    ],
    link: 'https://gitee.com/zfc_universe'
  }
]

</script>

<style scoped lang="scss">
.DContainer {
    width: 100%;
    margin-top: 10px;
    // border: 1px solid red;
    .topImg {
        width: 100%;
        height: 600px;
        display: flex;
        img {
            flex: 1;
            height: 100%;
        }
        .teamTask {
            flex: 1;
            height: 100%;
            border-left: 1px solid #666;
            .list {
                // border: 1px solid red;
                padding: 0px 100px;
                ol li {
                    list-style-type: decimal;
                    list-style-position: inside;
                    margin: 20px;
                }
            }
        }
    }
    .bottomPersonalDivision {
        // height: 600px;
        border: 1px solid black;
        border-bottom: 1px solid transparent;
        margin: 25px 0;
        display: flex;
        justify-content: space-around;
        .el-card {
            width: 20%;
            // height: 400px;
            position: relative;
            .imgContainer {
                width: 200px;
                height: 200px;
                // position: absolute;
                // left: 50%;
                // transform: translateX(-50%);
                margin: 0 auto;
            }
            img {
                width: 100%;
                height: 100%;
            }
        }
    }
}

</style>
